nav {
  display: flex;

  a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    opacity: 50%;

    p,
    i {
      pointer-events: none;
    }

    &:hover,
    &.active {
      opacity: 1;
    }
  }
}

@media(orientation:portrait) {

  nav {
    height: fit-content;
    justify-content: space-around;
    width: 100%;
    padding: 1.5dvh 0 2.5dvh;

    a {
      height: 100%;
      flex-direction: column;
      justify-content: space-evenly;
      flex: 1;
      text-align: center;

      i {
        font-size: 1.5rem;
      }

      p {
        display: none;
      }
    }
  }

}

@media(orientation:landscape) {

  nav {
    flex-direction: column;
    justify-content: space-around;
    font-size: large;

    a {
      margin-bottom: 2dvh;

      i {
        margin-right: 5%;
      }
    }

  }

}